<template>
  <div v-loading="loading">
    <DetailPanel :dataSource="form" :columns="columns">
      <template slot="cooperate">
        <span style="min-width: 100px">合作协议：</span>
        <el-image
          v-if="form.cooperationUrl"
          :src="getImgUrl(form, 'cooperationUrl')"
        />
        <span v-else>无</span>
      </template>
      <template slot="license">
        <span style="min-width: 100px">营业执照：</span>
        <el-image v-if="form.licenseUrl" :src="getImgUrl(form, 'licenseUrl')" />
        <span v-else>无</span>
      </template>
    </DetailPanel>
    <div
      v-if="form.approval !== 'WAIT'"
      class="apply-review-manage__result panel"
    >
      <div class="apply-review-manage__result">
        <span>审核结果：</span>
        <span style="color: red">{{
          form.approval === 'PASS' ? '通过' : '未通过'
        }}</span>
      </div>
      <div class="apply-review-manage__result">
        <span>审核时间：</span>
        <span>{{ approvalTime }}</span>
      </div>
      <div class="apply-review-manage__result">
        <span>审核原因：</span>
        <span>{{ form.approvalRemark }}</span>
      </div>
    </div>
    <div>
      <el-button
        v-if="form.approval === 'WAIT'"
        @click="handlePass"
        type="success"
        >通过</el-button
      >
      <el-button
        v-if="form.approval === 'WAIT'"
        @click="handleRefuse"
        type="warning"
        >不通过</el-button
      >
      <el-button @click="handleGoBack" type="success">返回</el-button>
    </div>
    <RefuseApplyDlg
      :type="dlgType"
      v-if="form.id"
      :visible.sync="dlgVisible"
      :id="form.id"
      :user-name="form.userName"
    />
  </div>
</template>
<script>
import { selectApplyDetail } from '@/api/user'
import DetailPanel from '@/components/DetailPanel'
import RefuseApplyDlg from './Dialogs/RefuseApplyDlg'
import dayjs from 'dayjs'
export default {
  name: 'UserApplyReviewManage',
  components: { DetailPanel, RefuseApplyDlg },
  computed: {
    approvalTime() {
      if (this.form.approvalTime) {
        return dayjs(this.form.approvalTime).format('YYYY-MM-DD HH:mm:ss')
      }

      return '--'
    },
  },
  mounted() {
    if (!this.$route.params.id) return

    this.loading = true
    selectApplyDetail({
      id: parseInt(this.$route.params.id, 10),
    })
      .then((res) => {
        this.form = res
      })
      .catch((err) => {
        console.log(err)
      })
      .then(() => {
        this.loading = false
      })
  },
  data() {
    return {
      dlgVisible: false,
      dlgType: '',
      loading: false,
      downloadUrl: '/file-management/file/download',
      columns: [
        {
          label: () => {
            return this.form.applyType === 'CREATE' ? '运营商名称' : '商户名'
          },
          value: 'userName',
        },
        {
          label: '管理员姓名',
          value: 'name',
        },
        {
          label: '手机号',
          value: 'mobile',
        },
        {
          label: '客服电话',
          value: 'serviceMobile',
        },
        {
          label: '商户属性',
          value: 'merchantAttr',
          formatter: () => {
            return this.form.merchantType === 'ANOTHER'
              ? '其他运营方'
              : '移动或铁通官方账号'
          },
          ifRender: () => {
            return !!this.form.merchantType
          },
        },
        {
          label: '商户单位',
          value: 'merchantType',
          formatter: () => {
            return this.form.merchantType === 'CMCC' ? '中国移动' : '中国铁通'
          },
          ifRender: () => {
            return (
              this.form.merchantType && this.form.merchantType !== 'ANOTHER'
            )
          },
        },
        {
          label: '商户级别',
          value: 'merchantType',
          formatter: () => {
            let str = ''
            switch (this.form.merchantLevel) {
              case 'CITY':
                str = '市'
                break
              case 'PROVINCE':
                str = '省'
                break
              case 'DISTRICT':
                str = '区'
                break
            }

            str += this.form.merchantType === 'CMCC' ? '移动' : '铁通'
            return str
          },
          ifRender: () => {
            return (
              this.form.merchantType && this.form.merchantType !== 'ANOTHER'
            )
          },
        },
        {
          label: '商户地区',
          value: 'districtName',
          formatter: () => {
            return this.form.provinceName
              ? this.form.provinceName
              : '' + this.form.cityName
              ? this.form.cityName
              : '' + this.form.districtName
              ? this.form.districtName
              : ''
          },
        },
        {
          label: '备注',
          value: 'remark',
          ifRender: () => {
            return !!this.form.remark
          },
        },
        {
          slot: 'cooperate',
        },
        {
          slot: 'license',
        },
      ],
      form: {},
    }
  },
  methods: {
    handlePass() {
      this.dlgType = 'PASS'
      this.dlgVisible = true
    },
    handleRefuse() {
      this.dlgType = 'REFUSE'
      this.dlgVisible = true
    },
    handleGoBack() {
      this.$router.push('/user/applyReviewList')
    },
    getImgUrl(row, value) {
      return (
        process.env.VUE_APP_BASE_URL_API +
        (this.downloadUrl ? this.downloadUrl : '/file/img') +
        '?fileId=' +
        row[value]
      )
    },
  },
}
</script>
<style lang="scss" scoped>
.apply-review-manage__result {
  display: flex;
  flex-wrap: wrap;

  .apply-review-manage__result {
    min-width: 200px;
    margin-left: 39px;
  }
}
</style>
